<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, height=device-height">
    <title>task</title>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link href="./font/style.css" rel="stylesheet">
    <link href="./css/task.css" rel="stylesheet">
    <link href="./css/taskVote.css" rel="stylesheet">
</head>
<body>
    <!--<span id="tt">1s11ssss3122111111</span>-->
    <div id="votePanel" class="votePanel"></div>
</body>

<script type="text/javascript">
    $(document).ready(() => {
        // $("#tt").animate({ 
        //     width: "50%",
        //     height: "100%", 
        //     fontSize: "2em", 
        //     borderWidth: 10
        // }, 1000 );

        // login(getTask);
        getTask().then(
            task => {
                $('#votePanel').append(renderVoteList(task.voteList));
                $('#votePanel').on('click', () => {
                    console.log('click vote panel!');
                })
            }
        )

    });
    const staticVoteImages = [
        './image/1.png',
        './image/2.png',
        './image/3.png',
        './image/4.png',
    ];

    const login = () => {
        $.post({
            url: 'https://testapi.helporz.com/v2/user/verify_sms',
            data: {
                smscode: '1',
                terminalInfo: {hid:'111', imsi:'123', os:'ios', serial:'', type:1, version:'1.0'},
                type: 1,
                userinfo: '1',
            },
        }).then(data => {
            console.log(data);
            // onSuccess(data);
            return data.data;
        })
    }
    // $("#tt").text(() => {
    //     return 12;
    // });
    const getTask = () => {
        return $.get({
            url: 'https://testapi.helporz.com/v2/task/1770/detail',
        }).then(data => {
            console.log(data);
            return data.data;
        })
    };

    const renderVoteList = voteList => {
        let totalVote = 0;
        voteList.forEach(v => {
            totalVote += v.count;
        });
        const renderVoteLine = (v, index) => {
            let progress, imgUrl;

            imgUrl = v.img ? v.img : staticVoteImages[index];
            
            if (totalVote === 0) {
                progress = 0;
            } else {
                progress = v.count / totalVote;
            }

            let progressCount = (progress*100).toFixed(0);
            if (progressCount==="100" && (v.count<totalVote)) {
                progressCount = '99';
            }
            if (progressCount==='0' && (v.count>0)) {
                progressCount = '1';
            }
            const progressStyle = 'width:' + 155 * progress + 'px';
            const progressText = v.count + '票 ' + progressCount + '%';

            return `
                <view class="lineCtn">
                    <image class="voteImage"
                    src="` + imgUrl + `"
                    ></image>
                    <view class="contentCtn">
                        <view class="strip bg"/>
                        <view class="strip" style="` + progressStyle + `"/>

                        <view class="contentCtnCtn">
                            <text class="content">` + v.content + `</text>` +
                            (v.isVoted && `<span class="ho-check-nobg content"></span>`) + `
                        </view>
                        <view class="percentCtn">
                            <text class="percent">` + progressText + `</text>
                        </view>
                    </view>
                </view>
            `;
        };

        return voteList.map((v, index) => {
            return renderVoteLine(v, index);
        });
    }
</script>

</html>